import { Spin } from 'antd';
import Loadable from 'react-loadable';

// 在一个组件中封装加载状态，HOC, 这里需要的component参数是一个函数
const LoadableComponent = (component: () => Promise<any>) => {
  // react-loadable可以实现按需加载,核心原理是动态引入，https://juejin.cn/post/6844903560325398541，提高网站响应速度
  // 源码地址https://github.dev/jamiebuilds/react-loadable, 这里还有问题待处理TODO
  return Loadable({
    loader: component,
    loading: () => <Spin />,
  });
};

export default LoadableComponent;
